<template>
	<sl-page title="商品订单">
		<view class="order">
			<view class="order-tab">
				<view class="order-tab-menu" :class="{ active: item.active}" v-for="(item, index) in orderAnalyse"
					:key="index" @click="handleOrderTabResult(item)">
					<view class="py-1">{{ item.name }}</view>
					<view class="py-1 f-w f-36">{{ item.count }}</view>
				</view>
			</view>
			<z-paging ref="paging" :paging-style="{'margin-top':top + 'px'}" v-model="orderList" @query="loadPage">
				<view class="order-page">
					<List :listDatas="orderList">
						<template v-slot="{ item }">
							<view class="item">
								<!-- 订单状态和时间 -->
								<view class="item-state">
									<view class="flex flex-y-center">
										<view class="profile-headimg">
											<sl-image :value="item.order.userHeadimg"></sl-image>
										</view>
										<view class="f-w">{{ item.order.userName }}</view>
									</view>
									<view class="flex flex-y-center">
										<view>{{ item.order.flowState }}</view>
									</view>
								</view>
								<!-- 商品详情 -->
								<view class="item-goods" v-for="(goods, index) in item.items" :key="index">
									<view class="goods-image">
										<sl-image :value="goods.productImage"></sl-image>
									</view>
									<view class="flex-column flex-basis-75">
										<view class="">{{ goods.productName }}</view>
										<view class="py-1 f-24 f-tip">
											订单时间：{{ goods.createDate }}
										</view>
										<view class="f-24 f-tip">
											联系电话：{{ item.order.phone }}
										</view>
										<view class="flex flex-x-between py-1 f-24 f-tip">
											<Money :priceValue="goods.productPrice" :activeClass="['money-normal']">
											</Money>
											<view class="promotion-brokerage">
												<uni-icons type="home" size="18"></uni-icons>
												<view class="px-1">
													佣金
												</view>
												<Money :priceValue="item.productPrice" :activeClass="['money-price']">
												</Money>
											</view>
										</view>
									</view>
								</view>
							</view>
						</template>
					</List>
				</view>
			</z-paging>
		</view>
	</sl-page>
</template>

<script>
	// import OrderApi from '@/api/order/order.js';
	import DistributionOrderApi from '@/api/order/distributionOrder.js';
	import Constants from '@/constants';
	import Money from '@/pages/components/money/money.vue';
	import List from '@/pages/components/list/list.vue';
	import Operate from '@/pages/components/order/operate/operate.vue';
	import Tag from '@/pages/components/tag/tag.vue';
	export default {
		//
		name: 'orderIndex',
		//
		mixins: [Constants],
		//
		components: {
			List,
			Money,
			Operate,
			Tag
		},
		//
		data() {
			return {
				//
				options: {},
				//
				query: {},
				//是否选中
				isActive: true,
				//
				orderList: [],
				//
				top: '',
				//订单分析
				orderAnalyse: [{
					id: '1',
					name: '已支付订单',
					count: '543',
					active: true,
				}, {
					id: '2',
					name: '未支付订单',
					count: '678',
					active: false,
				}],
			};
		},
		//
		onLoad() {
			//初始化我的订单统计
			// this.initOrderMenu();
		},
		//
		onShow() {
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.order-tab').boundingClientRect(data => {
					this.top = this.CustomBar + data.height;
				}).exec();
			});
		},
		//
		methods: {
			// initOrderMenu() {
			// 	this.orderAnalyse = [{
			// 		id: '1',
			// 		name: '已支付订单',
			// 		count: '543',
			// 		active: true,
			// 	}, {
			// 		id: '2',
			// 		name: '未支付订单',
			// 		count: '678',
			// 		active: false,
			// 	}];
			// },
			//tab切换查询参数
			handleOrderTabResult(item) {
				const orderAnalyse = [{
						id: '1',
						name: '已支付订单',
						count: '543',
						active: false,
					},
					{
						id: '2',
						name: '未支付订单',
						count: '678',
						active: false,
					}
				];

				if (item.id === '1') {
					orderAnalyse[0].active = true;
				} else if (item.id === '2') {
					orderAnalyse[1].active = true;
				}

				this.orderAnalyse = orderAnalyse;
				this.$refs.paging.reload();
			},
			//加载订单（个人）
			loadPage: async function() {
				try {
					// const res = await OrderApi.page(this.query, this.param);
					const res = await DistributionOrderApi.query(this.query, this.param);
					this.$refs.paging.complete(res.obj.data);
				} catch (error) {
					console.error('【orderIndex:loadPage】:', error);
					this.$refs.paging.complete(false);
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.order {
		font-size: $uni-font-size-base;
		color: $uni-text-color-primary;
		padding: 16rpx 32rpx;

		.order-tab {
			display: flex;
			justify-content: space-around;
			padding: 12rpx 0rpx;
			height: 76px;
			flex-shrink: 0;
			border-radius: 8px;
			background: #FFF;
			box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);

			.order-tab-menu {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 95px;
				height: 64px;
				flex-shrink: 0;
				border-radius: 8px;
			}
		}

		.order-page {
			margin-top: 24rpx;
			margin-left: 32rpx;
			margin-right: 32rpx;

			.item {

				.item-state {
					display: flex;
					justify-content: space-between;
					padding-top: 24rpx;
					
					.profile-headimg{
						position: relative;
						width: 52rpx;
						height: 52rpx;
						margin-right: 20rpx;
						overflow: hidden;
						border-radius: 8rpx;
					}
				}

				.item-goods {
					display: flex;
					justify-content: space-between;
					padding-top: 24rpx;

					.goods-image {
						position: relative;
						width: 128rpx;
						height: 128rpx;
						overflow: hidden;
						background: $uni-bg-color;
						margin-right: 20rpx;
					}

					.promotion-brokerage {
						color: #9B4620;
						display: inline-flex;
						padding: 0px 8px;
						align-items: center;
						gap: 10px;
						border-radius: 4px;
						background: #FFF7F4;
						margin-right: 24rpx;
					}
				}
			}
		}
	}

	.active {
		border: 1px solid #F9E6DE;
		background: linear-gradient(180deg, #FFEDE8 0%, rgba(243, 243, 243, 0.00) 100%);
	}
</style>